var DisplayBlock = function($element, $value, maxWidth, maxHeight){
    var scale = 1;
    var rap = Raphael($element, maxWidth, maxHeight);
    var points = [];
    //read data from string and set scale
    if($value != ''){
        points = eval($value);
        var width = 0;
        var height = 0;
        var minX = undefined;
        var maxX = undefined;
        var minY = undefined;
        var maxY = undefined;
        var length = points.length;
        for (var i = 0; i < length; i++) {
            var point = points[i];
            if(minX == undefined){
                minX = parseFloat(point.posX);
                maxX = parseFloat(point.posX);
                minY = parseFloat(point.posY);
                maxY = parseFloat(point.posY);
            }
            if (parseFloat(minX) > parseFloat(point.posX)) {
                minX = parseFloat(point.posX);
            }
            if (parseFloat(maxX) < parseFloat(point.posX)) {
                maxX = parseFloat(point.posX);
            }
            if (parseFloat(minY) > parseFloat(point.posY)) {
                minY = parseFloat(point.posY);
            }
            if (parseFloat(maxY) < parseFloat(point.posY)) {
                maxY = parseFloat(point.posY);
            }
        }
        console.log('call display');
        width = maxX - minX;
        height = maxY - minY;
        if(Math.abs(maxWidth/width) > Math.abs(maxHeight/height)){
            scale = Math.abs(maxHeight/height);
        }else{
            scale = Math.abs(maxWidth / width);
        }
        
        var strPath = 'M'+((points[0].posX - minX)*scale)+' '+((points[0].posY - minY)*scale);
        for (i = 1; i < length; i++) {
            strPath += 'L'+((points[i].posX - minX)*scale)+' '+((points[i].posY - minY)*scale);
        }
        strPath += 'L'+((points[0].posX - minX)*scale)+' '+((points[0].posY - minY)*scale);
        console.log(strPath);
        rap.path(strPath).attr("fill", "#00ff01");
    }
}